<template>
	<view class="">

		<!-- 我的需求 -->
		<view class="module-box demand-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">{{ tabNavOn == 0 ? '我的需求' : '我的商铺需求' }}</view>
				<view class="demand-num">{{demandList.length>0?demandIdx+1:0}} / {{demandList.length || 0}}</view>
			</view>
			<view class="demand-swiper">
				<swiper class="swiper-box" :current="demandIdx" :indicator-dots="false" :autoplay="false"
					:interval="3000" :duration="1000" @change="changeSwiperDemand" v-if="demandList.length>0">
					<swiper-item class="swiper-item" v-for="(item,index) in demandList" :key="index">
						<view class="swiper-item" v-if="item.id">
							<!-- 需求信息 图片 优势 租金 转让费 -->
							<view class="acea-row row-middle row-between demand-info" @click="toDetail(item)">
								<!-- <view class="demand-info-tip">{{ item.title?item.title.substring(0,4):'' }}</view> -->
								<image :src="toImage(item)" mode=""></image>
								<view class="acea-row row-column row-between demand-info-l">
									<view class="info-tit line2">
										<!-- 	{{ item.status==0 ? '出租' : (item.status==1 ? '出售' : '转让') }} | {{ item.addres }}
										| {{ item.avea || 0 }} ㎡ -->
										{{item.title}}
									</view>
									<view class="acea-row row-bottom info-money line1">
										<view class="rent-box">
											<text>{{ item.rent&&item.rent!=0?item.rent+'元/月':'无' }}</text>
										</view>
										<view class="transfer-box" v-if="item.transferFee">转让费:
											<text>{{ item.transferFee&&item.transferStatus!=1?item.transferFee+'万':'面议'}}
											</text>
										</view>
									</view>
									<view class="acea-row advantage-box line2">
										<text>优势：</text>
										<text class="advantage"
											v-for="(tag,index) in item.storeAdvantage?item.storeAdvantage.split('/'):[]">{{ tag }}</text>
									</view>
								</view>
							</view>

							<!-- 适合场所 -->
							<view class="suitable-box" v-if="item.workingGroupName&&item.workingGroupName.length>0">
								<text>适合：</text>
								<text class="suitable" v-for="child in item.workingGroupName.split('/')"
									:key="child">{{child}}</text>

							</view>

							<!-- 浏览、咨询统计 -->
							<!-- 				<view class="acea-row row-middle row-between visit-box">
								<view class="visit-advtar">
									<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index" :style="{left: (20 * index) + 'rpx'}"></image>
								</view>
								<view class="acea-row row-middle row-between visit-l">
									<view class="visit-num">18288人浏览</view>
									<view class="visit-num">5866人咨询</view>
								</view>
							</view> -->

							<!-- 匹配信息 -->
							<!-- 			<view class="acea-row row-middle row-between matching-box"  @click="toDetail">
								<view>已为您匹配到889人，点击查看详情！</view>
								<image src="@/static/images/index/guid_icon.png" mode=""></image>
							</view> -->
						</view>
						<view class="swiper-item" v-else>
							<view class="main-content">
								<view class="main-tittle acea-row row-between">
									<view class="tittle-left">
										<text v-if="item.storeCategoryName">{{item.storeCategoryName}}<text
												style="margin: 0 10rpx  ;">|</text></text>{{ item.title }}
									</view>
								</view>
								<view class="mian-center acea-row row-between" style="border-bottom: none;"
									@click="toPages('/pages/details/askRent/askRent?storeCategory='+item.storeCategory+'&'+ (item.buystoreId ? 'buystoreId=' : 'askrentId=' ) + (item.buystoreId ? item.buystoreId : item.askrentId ))">
									<view class="center-left" v-if="item.askrentId">
										<p>面积：{{ item.area || 0 }}㎡</p>
										<p>租金：{{ item.rent || 0 }}元</p>
										<p>计划经营：{{item.categoryName || ''}}</p>
										<!-- <p>期望经营：20-50</p> -->
									</view>
									<view class="center-left" v-else>
										<p>面积：{{ item.area || 0 }}㎡</p>
										<p>投资金额：{{ item.price || 0 }}元</p>
										<p>期望区域：{{item.hopeAreaName || ''}}</p>
										<!-- <p>期望经营：20-50</p> -->
									</view>
								</view>

							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="noData" v-else>暂无数据</view>
			</view>
		</view>

		<!-- 悬赏任务（规则） -->
		<view class="module-box task-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">悬赏任务（规则）</view>
				<view class="acea-row row-middle row-between">
					<view class="task-top-btn" style="margin-right: 20rpx;"
						@click="toPages('/pages/others/promotionTask/promotionTask?type='+tabNavOnList[tabNavOn].toType)">
						{{tabNavOnList[tabNavOn].label}}</view>
					<view class="task-top-btn" @click="myStorePage">赏金商城</view>
				</view>
			</view>
			<view class="task-list">
				<view v-for="(item,index) in taskList" :key="index">
					<task-item :list="item"></task-item>
				</view>
			</view>

		</view>

		<!-- 二手闲置 -->
		<view class="module-box second-hand" v-if="tabNavOn == 0">
			<view class="acea-row row-middle row-between">
				<view class="module-title">二手闲置</view>
				<view class="look-more" @click="secoundHandArea">查看更多</view>
			</view>

			<view class="acea-row row-middle row-around second-box">
				<view @click="toPages('/pages/others/unusedList/unusedList?index=0')">
					<view class="second-num">{{ statisticsData.sale || 0 }}</view>
					<view class="second-text">出售数量</view>
				</view>
				<view class="line"></view>
				<view @click="toPages('/pages/others/unusedList/unusedList?index=1')">
					<view class="second-num">{{ statisticsData.buy || 0 }}</view>
					<view class="second-text"> 求购数量</view>
				</view>
			</view>
		</view>

		<!-- 品牌商家 -->
		<view class="module-box brand-merchant">
			<view class="acea-row row-middle row-between">
				<view class="module-title" @click="toPages('/pages/others/brandList/brandList')">品牌商家</view>
				<view class="acea-row row-middle btns">
					<view class="btn white-bg"
						@click="toPages('/pages/releases/brandCorrelation/brandCorrelation?typeOn=0')">
						品牌入驻
					</view>
					<view class="btn red-bg"
						@click="toPages('/pages/releases/brandCorrelation/brandCorrelation?typeOn=1')">
						申请加盟
					</view>
				</view>
			</view>
			<view class="merchant-num" @click="toPages('/pages/others/brandList/brandList')">
				全国品牌 <text>{{ brandList[0] ? brandList[0].num : 0 }}</text> 家
			</view>
			<scroll-view scroll-x="true" style="height:176rpx;white-space: nowrap;margin-top: 28rpx;">
				<view class="" style="display: flex;white-space: nowrap;"
					>
					<view class="merchant" v-for="item in brandList" :key="item.id" @click="toPages('/pages/details/brand/brand?id='+item.id)">
						<image :src="item.logoImage" mode=""></image>
						<view class="text">{{ item.realname }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 商家服务 -->
		<view class="module-box service" v-if="tabNavOn == 0">
			<view class="acea-row row-middle row-between">
				<view class="module-title">商家服务</view>
				<view class="acea-row row-middle btns">
					<view class="btn white-bg"
						@click="toPages('/pages/others/applyServiceProvider/applyServiceProvider')">
						加入服务商
					</view>
					<view class="btn red-bg" @click="findService">
						找服务商
					</view>
				</view>
			</view>
			<view class="service-list">
				<view class="service-item" v-for="(item,index) in merchants" :key="index"
					@click="toPages('/pages/others/merchantServiceList/merchantServiceList?index='+index)">
					<image :src="item.icon" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>

		<!-- 供应链 -->
		<view class="module-box service" v-if="tabNavOn == 0">
			<view class="acea-row row-middle row-between">
				<view class="module-title">供应链</view>
				<view class="acea-row row-middle btns">
					<view class="btn white-bg" @click="toPages('/pages/releases/supplyChain/supplyChain')">
						加入供应链
					</view>
					<view class="btn red-bg" @click="findSupplyChain">
						找供应链
					</view>
				</view>
			</view>
			<view class="service-list">
				<view class="service-item" v-for="(item,index) in supplys" :key="index" @click='toBrand(index)'>
					<image :src="item.icon" mode="" style="background: rgba(247, 247, 247, 1);border-radius: 100rpx;">
					</image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStatisticsApi,
		getStatisticsListApi,
		getTypeApi,
		getSupplyApi,
		getBrandApi
	} from "@/api/api.js";
	import {
		RewardListApi
	} from '@/api/reward.js'
	import {
		getCityId
	} from '@/filters/commFilter.js'
	import {
		OnListApi,
		onBuyListApi,
		getOnGroupListApi
	} from '@/api/subletOfShop.js'
	import {
		getclassificationListApi
	} from '@/api/brand/index.js'
	import menuModule from '../menuModule.vue'
	import newsModule from '../newsModule.vue'
	import taskItem from '@/pages/others/components/taskItem.vue'
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			menuModule,
			newsModule,
			taskItem
		},
		props: {
			tabNavOn: {
				type: Number,
				default: 0
			},
			refsh: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				statisticsData: {},
				taskList: [],
				demandList: [],
				// 浏览信息头像数组
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				demandIdx: 0, //我的需求当前下标
				demandLength: 4, //我的所有需求
				tabTitle: [{
					cate_name: '推荐'
				}, {
					cate_name: '商铺房屋'
				}, {
					cate_name: '二手'
				}, {
					cate_name: '供应链'
				}, {
					cate_name: '商家服务'
				}, {
					cate_name: '招工'
				}],
				merchants: [],
				supplys: [],
				brandList: [],
				tabNavOnList: {
					0: {
						label: '悬赏大厅',
						toType: 0
					},
					1: {
						label: '商铺悬赏',
						toType: 0
					},
					2: {
						label: '二手悬赏',
						toType: 4
					},
					3: {
						label: '供应悬赏',
						toType: 6
					},
					3: {
						label: '商家悬赏',
						toType: 5
					},
					4: {
						label: '招工悬赏',
						toType: 7
					}
				}
			}
		},
		created() {
			this.getBrandList();
			this.getStatisticsData();
			this.getTypeList();
			this.getSupplyList();
			this.getRewardList();
			this.getOnList()

		},
		mounted() {

		},
		computed: {
			...mapGetters(['isLogin']),
		},
		watch: {
			tabNavOn() {
				this.demandList = [];
				this.getOnList();
			},
			refsh() {
				if (this.merchants.length < 1) {
					this.getTypeList();
				}
				if (this.supplys.length < 1) {
					this.getSupplyList();
				}
				if (this.brandList.length < 1) {
					this.getBrandList();
				}
				this.getOnList();
				this.getStatisticsData();
			}
		},
		methods: {
			toImage(item) {
				let t = item.shopfrontPhoto ? item.shopfrontPhoto.split(',') : '';
				if (!t) {
					return this.$noImageShow
				}
				let sp = this.separateVideosAndImages(t);
				return sp.imageArray.length > 0 ? sp.imageArray[0] : this.$noImageShow

			},
			jumpPage(item) {
				let enums = {
					883: 0,
					884: 1,
					1014: 2,
					911: 3,
					885: 4,
					912: 5,
					913: 6,
				}
				let categoryOnTab = enums[item.storeCategory];
				if (item.askrentId) {
					item.id = item.askrentId
				} else if (item.buystoreId) {
					item.id = item.buystoreId
				}
				console.log("typeOn", item)
				this.toPages('/pages/releases/subletOfShop/subletOfShop?categoryOn=' + categoryOnTab + '&typeOn=' + item
					.statusCode + '&id=' + item.id + '&mind =1')
			},
			separateVideosAndImages(inputArray) {
				let videoArray = [];
				let imageArray = [];

				const videoExtensions = /\.(mp4|avi|mov)$/i;
				const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;

				inputArray.forEach(item => {
					const extension = item.match(/\.[0-9a-z]+$/i) ? item.match(/\.[0-9a-z]+$/i)[0] : '';

					if (extension.match(videoExtensions)) {
						videoArray.push(item);
					} else if (extension.match(imageExtensions)) {
						imageArray.push(item);
					}
				});
				if (imageArray.length < 1 && videoArray.length < 1 && inputArray.length > 0) {
					imageArray = inputArray;
				}
				return {
					videoArray,
					imageArray
				};
			},
			myStorePage(type) {
				let url = '/pages/goods/goods_list/index';
				wx.navigateTo({
					url
				});
			},
			//悬赏任务
			async getRewardList() {

				let city = this.$city;
				if (!city) {
					let d = await getCityId()
					city = d.cityId
				}
				try {
					let res = await RewardListApi({
						limit: 2,
						page: 1,
						city
					});
					this.taskList = res.data.list;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//我的需求

			async getOnList() {
				console.log('isLogin', this.isLogin)
				if (!this.isLogin) {
					return;
				}
				try {
					let lks = await getOnGroupListApi({
						storeCategory: this.tabNavOn == 0 ? '' : 883
					});
					let wes = await onBuyListApi({
						storeCategory: this.tabNavOn == 0 ? '' : 883
					});
					let res = await OnListApi({
						storeCategory: this.tabNavOn == 0 ? '' : 883
					});
					this.demandList = [...res.data.list, ...lks.data.list, ...wes.data.list];
					console.log("this.demandList", this.demandList)
				} catch (e) {
					//TODO handle the exception
					console.log('xq', e)
				}
			},

			//获取二手闲置数据
			async getStatisticsData() {
				try {
					let res = await getStatisticsListApi(this.$city);
					this.statisticsData = res.data
					console.log("this.statisticsData============>", this.statisticsData)
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取商家服务
			async getTypeList() {
				try {
					let res = await getTypeApi();
					this.merchants = res.data.list;
				} catch (e) {

				} finally {

				}
			},
			//获取品牌
			async getBrandList() {
				try {
					let res = await getBrandApi({
						limit: 10,
						page: 1
					});
					this.brandList = res.data.list;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取供应链
			async getSupplyList() {
				try {
					let res = await getclassificationListApi({
						status: 1
					});
					this.supplys = res.data;
				} catch (e) {

				} finally {

				}
			},
			toBrand(index) {
				uni.navigateTo({
					url: '/pages/others/supplyChainList/supplyChainList?index=' + index
				})
			},
			changeSwiperDemand(e) {
				this.demandIdx = e.detail.current
			},
			toDetail(item) {
				console.log("item",item.storeCategory)
				uni.navigateTo({
					url: '/pages/details/shopRent/shopRent?id=' + item.id + '&st=' + item.status +
						'&storeCategory=' + item.storeCategory
				})
			},
			secoundHandArea() {
				let obj = {
					index: 2,
					type: 'big' //小标题
				}
				this.$emit('changeTab', obj);
			},
			findService() {
				let obj = {
					index: 4,
					type: 'big' //小标题
				}
				this.$emit('changeTab', obj);
			},
			findSupplyChain() {
				let obj = {
					index: 3,
					type: 'big' //小标题
				}
				this.$emit('changeTab', obj);
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style lang="scss">
	// 我的需求
	.demand-box {
		.demand-num {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(212, 212, 229, 1);
		}

		.demand-swiper {
			position: relative;
			width: 100%;
			min-height: 200rpx;

			.swiper-box,
			.swiper-item {
				width: 100%;
				height: 320rpx;
			}

			// 需求图片及信息
			.demand-info {
				margin-top: 30rpx;
				position: relative;

				.demand-info-tip {
					position: absolute;
					left: 0px;
					top: 0px;
					max-width: 125rpx;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 10rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;

				}

				image {
					display: block;
					margin: 0;
					width: 236rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}

				.demand-info-l {
					width: calc(100% - 236rpx - 20rpx);
					height: 210rpx;

					.info-tit {
						width: 100%;
						margin-bottom: 8rpx;
					}

					.info-money {
						width: 100%;
						margin-bottom: 8rpx;

						.rent-box {
							font-size: 28rpx;
							font-weight: 400;
							margin-right: 18rpx;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
								color: rgba(238, 33, 45, 1);
							}
						}

						.transfer-box {
							// margin-left: 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);

							text {
								font-weight: 700;
							}
						}
					}

					.advantage-box {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);

						.advantage {
							padding: 0 10rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4px;
							background: rgba(255, 232, 234, 1);
							letter-spacing: 0.4rpx;
							margin-right: 14rpx;
							margin-bottom: 15rpx;
							white-space: nowrap;
						}
					}
				}
			}

			// 适合场所

			.suitable-box {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(82, 104, 139, 1);
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);

				.suitable {
					display: inline-block;
					letter-spacing: 0.4rpx;
					padding: 10rpx;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					margin-left: 12rpx;
					white-space: nowrap;
				}
			}

			// 浏览咨询统计
			.visit-box {
				padding: 30rpx 0;

				.visit-advtar {
					width: 40%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}

				.visit-l {
					width: 60%;
					height: 46rpx;

					.visit-num {
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}

			}

			// 匹配信息
			.matching-box {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}


	// 悬赏任务
	.task-box {
		.task-top-btn {
			width: 154rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}


	}

	// 二手闲置
	.second-hand {
		.look-more {
			font-size: 24rpx;
			color: rgba(175, 175, 175, 1);
		}

		.second-box {
			width: 634rpx;
			height: 150rpx;
			opacity: 1;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			text-align: center;
			margin-top: 28rpx;

			.second-num {
				font-size: 40rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.second-text {
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
			}

			.line {
				width: 0px;
				height: 76rpx;
				opacity: 1;
				background: rgba(64, 63, 63, 1);
				border: 1px solid rgba(229, 229, 229, 1);
			}
		}
	}

	// 品牌商家
	.brand-merchant {

		.merchant-num {

			/** 文本4 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				/** 文本3 */
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(247, 5, 5, 1);
			}
		}

		.merchant {
			width: 162rpx;
			margin-right: 28rpx;

			image {
				width: 162rpx;
				height: 124rpx;
				opacity: 1;
				border-radius: 10rpx;
			}

			.text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 162rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				margin-top: 18rpx;
				text-align: center;
			}
		}
	}

	// 商家服务
	.service {
		.service-list {
			margin-top: 28rpx;
			padding-bottom: 32rpx;
			/* 声明一个容器 */
			display: grid;
			/* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
			grid-template-columns: repeat(4, 20%);
			/* 声明行间距和列间距 */
			grid-gap: calc(20% / 4);

			/* 分别表示两行的高度 */
			// grid-template-rows: 100px 200px;
			.service-item {
				text-align: center;
				background-size: 100% 100%;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				view {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}
			}
		}
	}


	// 各个模块样式
	.module-box {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;

		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);

			}
		}
	}

	.btns {
		.white-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: #ffffff;
			font-size: 24rpx;
			color: rgba(238, 33, 45, 1);
			margin-right: 16rpx;
		}

		.red-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			font-size: 24rpx;
			color: #ffffff;
		}
	}

	.noData {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.main-content {
		padding: 30rpx 0;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 28rpx 28rpx 28rpx;

		.main-tittle {
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			padding: 24rpx 0 18rpx 0;

			.tittle-left {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 30rpx;
				width: 80%;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.tittle-right {
				// width: 100%;
				line-height: 44rpx;
				height: 44rpx;
				border-radius: 10rpx;
				background: rgba(238, 33, 45, 1);
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
			}
		}

		.mian-center {
			padding: 14rpx 0 20rpx 0;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);

			.center-left {
				p {
					font-size: 24rpx;
					line-height: 40rpx;
					color: rgba(128, 128, 128, 1);
				}
			}

			.center-right {
				font-size: 24rpx;
				color: rgba(238, 33, 45, 1);
			}
		}

		.main-bottom {
			margin-top: 28rpx;

			.bottom-btn {
				width: 90rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgba(128, 128, 128, 1);
				border-radius: 4rpx;
				border: 2rpx solid rgba(229, 229, 229, 1);
				margin-bottom: 32rpx;
			}
		}
	}

	.rt {
		margin-left: 20rpx;
	}

	.v {
		// display: flex;
		margin-left: 10rpx;
	}
</style>